import { useEffect } from 'react'
import { useRoutes, useLocation, useNavigate } from 'react-router-dom'
import { message } from 'antd'
import router from './router'

function ToLogin() {
  const navigateTo = useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(() => {
    // 加载完组件之后执行这里的代码
    navigateTo('/login')
    message.warning('请先登录')
  }, [])
  return <div>出错啦！</div>
}

function ToPage1() {
  const navigateTo = useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(() => {
    // 加载完组件之后执行这里的代码
    navigateTo('/page1')
    message.warning('登录成功')
  }, [])
  return <div></div>
}

function BeforeRouterEnter() {
  const outlet = useRoutes(router)

  /**
   * 后台管理系统两种经典的跳转情况：
   * 1、如果访问的是登录页面，并且有token，跳转到首页
   * 2、如果访问的是非登录页面，并且没有token，跳转到登录页
   * 3、其余的情况，正常放行
   */
  // 1
  let token = localStorage.getItem('token')
  const location = useLocation()
  if (location.pathname === '/login' && token) {
    // 这里不能直接用useNavigate，因为useNavigate只能在组件中调用
    return <ToPage1 />
  }
  // 2
  if (location.pathname !== '/login' && !token) {
    // 这里不能直接用useNavigate，因为useNavigate只能在组件中调用
    return <ToLogin />
  }
  return outlet
}

function App() {
  return (
    <>
      <BeforeRouterEnter />
    </>
  )
}

export default App
